<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Bootstrap 实例 - 边框表格</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/bs_switch.css" />
    <link rel="stylesheet" type="text/css" href="layui/css/layui.css" />
    <script src="js/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="js/Vue.js"></script>
    <script type="text/javascript" src="js/axios.js"></script>
    <script type="text/javascript" src="layui/layui.js"></script>
    <script src="js/script.js"></script>

</head>

<body>
    <div id="abc">
        <div class="col-sm-3 pull-left" style="margin-left: 12%;">
            <button class="btn btn-primary" id="add" onclick="add()">添加</button>&nbsp;
            <button class="btn btn-primary" id="delete" @click="delAny()">批量删除</button>&nbsp;
            <button class="btn btn-primary" id="export">导出</button>
        </div>

        <div class="container">

            <div class="tableBody" style="margin-top: 50px;">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        查询条件
                    </div>
                    <div class="panel-body form-group" style="margin-bottom:0px;">
                        <label class="col-sm-2 control-label" style="text-align: right; margin-top:5px">课件名称：</label>
                        <div class="col-sm-2">
                            <input type="text" class="form-control" v-model="name" name="name" id="name" />
                        </div>
                        <label class="col-sm-2 control-label" style="text-align: right; margin-top:5px">课程分类</label>
                        <div class="col-sm-2">
                            <select class="form-control" v-model="category" id="category">
                            <option value="0">全部</option>
                            <option v-for="category in categorys" :value="category.categoryId">
                                {{category.categoryName}}
                            </option>
                        </select>
                        </div>
                        <div class="col-sm-2 pull-left">
                            <button class="btn btn-primary" id="find" @click="findcourseware()">查询</button>&nbsp;
                            <button class="btn btn-primary" id="clear" onclick="clearall()">清空</button>
                        </div>
                        <br>
                        <div style="width: 100%;height: 50%;float: left;margin-left: 6%;">
                            <div id="SupendButton-one" class="btn" style=" margin-top:30px; border: 1px solid black;
                        margin-right: -1px;margin-bottom: -1px; background-color: #87CEFA;" onclick=SupendButtonClick(this);>
                                <p>全部</p>
                            </div>
                            <div id="SupendButton-two" class="btn" style="margin-top:30px; border: 1px solid black;
                        margin-right: -1px;margin-bottom: -1px;" onclick=SupendButtonClick(this);>
                                <p>未审核</p>
                            </div>
                            <div id="SupendButton-three" class="btn" style="margin-top:30px;border: 1px solid black;
                        margin-right: -1px;margin-bottom: -1px;" onclick=SupendButtonClick(this);>
                                <p>已审核</p>
                            </div>
                            <div id="SupendButton-four" class="btn" style="margin-top:30px;border: 1px solid black;
                        margin-right: -1px;margin-bottom: -1px;" onclick=SupendButtonClick(this);>
                                <p>审核不通过</p>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- <table id="mytab" class="table table-hover"></table>
        <div id="toolbar" class="btn-group pull-right" style="margin-right: 20px;">
            <button id="btn_add" type="button" class="btn btn-default">
                <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
            </button>
        </div> -->
            </div>

            <div class="tableBody table-responsive">
                <table class="table table-bordered table-hover">
                    <thead>
                        <tr>
                            <th><input id="checkAll" type="checkbox"></th>
                            <th>编号</th>
                            <th>课件名称</th>
                            <th>课程分类</th>
                            <th>课件时长</th>
                            <th>格式</th>
                            <th>更新时间</th>
                            <th>状态</th>
                            <th>公开</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody v-for="courseware in coursewares">
                        <tr>
                            <td><input type="checkbox" name="chkOne" class="chkOne" v-bind:value="courseware.cwid"></td>
                            <td>{{courseware.cwid}}</td>
                            <td>{{courseware.cwname}}</td>
                            <td>{{courseware.categoryName}}</td>
                            <td>{{courseware.duration}}</td>
                            <td>{{courseware.format}}</td>
                            <td>{{courseware.updateTime}}</td>
                            <td>{{courseware.examine}}</td>
                            <td style="white-space:nowrap">
                                <input v-if="courseware.isOpen ==='1'" id="isOpen" type="checkbox" checked="checked" class="bs_switch" value="courseware.examine" data-on="是" data-off="否">
                                <input v-if="courseware.isOpen ==='0'" type="checkbox" class="bs_switch" value="courseware.examine" data-on="是" data-off="否">
                            </td>
                            <td style="white-space:nowrap">
                                <div style="flex-direction: row;">
                                    <input class="btn btn-danger " type="submit" id="del" value="删除" @click="del(courseware.cwid)" />&nbsp;
                                    <input class="btn btn-primary  " type="submit" id="fclick" @click="fclick(courseware.cwid)" value="查看" />
                                    <input class="btn btn-primary  " type="submit" id="edit" value="编辑" @click="edit(courseware.cwid)" />&nbsp;
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
                <!-- 分页控件 -->
                <div id="pageParent222" class="pageParent"> </div>
                <!-- <div id="pageTool"></div> -->
            </div>
        </div>
    </div>
</body>

<script type="text/javascript">
    var examine = null;

    function SupendButtonClick(obj) {
        //清空其它同类按钮选中颜色
        $('div[id^="SupendButton-"]').css("background-color", "white"); //按钮原来颜色
        //点击后变色

        $(obj).css("background-color", "#87CEFA");
        if (obj.id === "SupendButton-two") {
            examine = "0";
        } else if (obj.id === "SupendButton-three") {
            examine = "1";
        } else if (obj.id === "SupendButton-four") {
            examine = "2";
        } else {
            examine = null;
        }
        console.log(examine)
        console.log(typeof examine)
    }

    var index = 1;
    var Size = 5;
    var totalPage;
    var totalNum;



    new Vue({
        el: "#abc",
        data() {
            return {
                coursewares: [],
                categorys: [],
                name: null,
                category: "0"
            };
        },
        mounted() {
            window.find = this.find; // 方法赋值给window
            window.findcourseware = this.findcourseware;
            axios.get(
                "/courseCategory/all"
            ).then(res => {
                if (res.data.code == 500) {
                    location.href = "/error/500.html";
                }
                console.log(res.data);
                this.categorys = res.data.data;
            });
            axios.get(
                "/courseware/condition/?index=" + index + "&pageSize=" + Size
            ).then(res => {
                if (res.data.code == 500) {
                    location.href = "/error/500.html";
                }
                console.log(res.data);
                this.coursewares = res.data.data.data;
                console.log(this.coursewares);
                totalPage = res.data.data.totalPage;
                totalNum = res.data.data.totalNum;
                console.info(totalNum);

                var runCallback3 = null;
                new dmm({
                    // index: 1,//当前页面                         默认1
                    cssStyle: 3, //控件样式                       默认1
                    // size: [10, 20, 30],//每页显示条数           默认[10,20]
                    skip: true, //是否显示跳转功能               默认不显示
                    setSize: true, //是否显示下拉框              默认不显示
                    container: "pageParent222", //控件容器id
                    //回掉函数，一般就是post请求后台方法得到分页数据加载到页面上
                    callback: function(e) {
                        e.index; //当前页
                        e.pageSize; //页面显示条数
                        //以上两个属性可以当作请求后台时传入的参数
                        index = e.index;
                        Size = e.pageSize;
                        //以下三行在加载完页面后必须填写
                        e.countpage = Math.ceil(totalNum / e.pageSize); //注意必写（数据总页数——通过后台方法获取）
                        e.infocount = totalNum; //注意必写（数据总条数——通过后台方法获取）
                        xian(e); //注意必写（加载控件）
                        console.info(e.infocount)
                            //可将以下代码用于查询使用--联合dian()方法
                        runCallback3 = e; //将分页条件赋值变量
                        // var obj = document.getElementById("pageParent222_w-select");
                        // for (i = 0; i < obj.length; i++) {
                        //     if (obj[i].value == pageSize)
                        //         obj[i].selected = true;
                        // }
                        find()
                    }
                })

            })
        },
        methods: {
            findcourseware() {
                var params = new URLSearchParams();
                if (this.name !== null) {
                    params.append("cwname", this.name);
                }
                params.append("category", this.category);
                if (examine !== null) {
                    params.append("examine", examine);
                }
                params.append("index", index);
                params.append("pageSize", Size);
                axios.post(
                    "/courseware/condition",
                    params
                ).then(res => {
                    if (res.data.code == 500) {
                        location.href = "/error/500.html";
                    }
                    console.log(res.data);
                    this.coursewares = res.data.data.data;
                    totalPage = res.data.data.totalPage;
                    totalNum = res.data.data.totalNum;
                    Size = res.data.data.pageSize;
                    console.info(totalNum);



                    var runCallback3 = null;
                    new dmm({
                        // index: 1,//当前页面                         默认1
                        cssStyle: 3, //控件样式                       默认1
                        // size: [10, 20, 30],//每页显示条数           默认[10,20]
                        skip: true, //是否显示跳转功能               默认不显示
                        setSize: true, //是否显示下拉框              默认不显示
                        container: "pageParent222", //控件容器id
                        //回掉函数，一般就是post请求后台方法得到分页数据加载到页面上
                        callback: function(e) {
                            e.index; //当前页
                            e.pageSize; //页面显示条数
                            //以上两个属性可以当作请求后台时传入的参数
                            index = e.index;
                            Size = e.pageSize;
                            //以下三行在加载完页面后必须填写
                            e.countpage = Math.ceil(totalNum / e.pageSize); //注意必写（数据总页数——通过后台方法获取）
                            e.infocount = totalNum; //注意必写（数据总条数——通过后台方法获取）
                            xian(e); //注意必写（加载控件）
                            console.info(e.infocount)
                                //可将以下代码用于查询使用--联合dian()方法
                            runCallback3 = e; //将分页条件赋值变量
                            // var obj = document.getElementById("pageParent222_w-select");
                            // for (i = 0; i < obj.length; i++) {
                            //     if (obj[i].value == pageSize)
                            //         obj[i].selected = true;
                            // }
                            find()
                        }
                    })

                })
            },
            find() {
                var params = new URLSearchParams();
                if (this.name !== null) {
                    params.append("cwname", this.name);
                }
                params.append("category", this.category);
                if (examine !== null) {
                    params.append("examine", examine);
                }
                params.append("index", index);
                params.append("pageSize", Size);
                axios.post(
                    "/courseware/condition",
                    params
                ).then(res => {
                    if (res.data.code == 500) {
                        location.href = "/error/500.html";
                    }
                    console.log(res.data);
                    this.coursewares = res.data.data.data;
                    totalPage = res.data.data.totalPage;

                    //1.获取全选按钮
                    var chkAllObj = document.getElementById("checkAll");
                    //2.获取所有单选框
                    var chkOneObjs = document.getElementsByClassName("chkOne");
                    console.info(chkOneObjs)
                    chkAllObj.checked = false;
                    for (var i = 0; i < chkOneObjs.length; i++) {
                        chkOneObjs[i].checked = false;
                    }
                })
            },
            del(id) {
                var params = new URLSearchParams();
                params.append("cwid", id);
                axios.post(
                    "/courseware/delCoursewareByCwid",
                    params
                ).then(res => {
                    if (res.data.code == 500) {
                        location.href = "/error/500.html";
                    }
                    if (res.data.code == 200) {
                        findcourseware();
                        alert("删除成功")
                    } else {
                        alert(res.data.message)
                    }
                })
            },
            delAny() {
                var cwids = new Array();
                var chkOneObjs = document.getElementsByClassName("chkOne");
                for (var i = 0; i < chkOneObjs.length; i++) {
                    if (chkOneObjs[i].checked == true) {
                        cwids.push(chkOneObjs[i].value);
                    }
                }
                var params = new URLSearchParams();
                params.append("cwids", cwids);
                axios.post(
                    "/courseware/delCoursewareByAnyCwid",
                    params
                ).then(res => {
                    if (res.data.code == 500) {
                        location.href = "/error/500.html";
                    }
                    if (res.data.code == 200) {
                        findcourseware();
                        alert("删除成功")
                    } else {
                        alert(res.data.message)
                    }
                })

            },
            edit(cwid) {
                console.log(cwid);
                layui.use(['layer', 'form'], function() {
                    var layer = layui.layer,
                        form = layui.form;
                    layer.open({
                        title: "修改",
                        type: 2,
                        skin: 'layui-layer-rim', //加上边框
                        area: ['1024px', '580px'], //宽高
                        content: 'edit.html?cwid=' + cwid
                    });
                })
            },
            fclick(cwid) {
                let data = {
                    "cwid": cwid
                }
                axios.post(
                    "/courseware/findCoursewareByCwid", data, {
                        headers: {}
                    }).then(res => {
                    if (res.data.code == 500) {
                        location.href = "/error/500.html";
                    }
                    if (res.data.code == 200) {
                        console.log(res.data.data);
                        var data = res.data.data
                        var Url;
                        if (data.format == "mp3") {
                            Url = "music.html?id=" + cwid
                        } else if (data.format == "mp4") {
                            Url = "movie.html?id=" + cwid
                        } else if (data.format == "pdf") {
                            Url = "http://117.51.156.132:8080/testUpload_war/file/" + data.cwname + ".pdf"
                        } else if (data.format == "jpg" || data.format == "png") {
                            Url = "img.html?id=" + cwid
                        } else if (data.format == "docx") {
                            Url = "http://www.xdocin.com/xdoc?_func=to&amp;_format=html&amp;_cache=1&amp;_xdoc=http://117.51.156.132:8080/testUpload_war/file/" + data.cwname + "." + data.format
                        } else {
                            layer.alert("暂不支持该类型预览！")
                        }

                        layui.use(['layer', 'form'], function() {
                            var layer = layui.layer,
                                form = layui.form;
                            layer.open({
                                title: "预览",
                                type: 2,
                                skin: 'layui-layer-rim', //加上边框
                                area: ['1024px', '600px'], //宽高
                                content: Url
                            });
                        })

                    }
                })
            }
        }
    });

    function clearall() {
        var obj = document.getElementById("category");
        for (i = 0; i < obj.length; i++) {
            if (obj[i].value == 0)
                obj[i].selected = true;
        }
        document.getElementById("name").value = null;
        //清空其它同类按钮选中颜色
        $('div[id^="SupendButton-"]').css("background-color", "white"); //按钮原来颜色
        //选中默认颜色
        $('div[id^="SupendButton-one"]').css("background-color", "#87CEFA"); //按钮原来颜色
        examine = null;
    }

    function add() {
        window.location.href = "/upload.html"
    }
</script>
<script type="text/javascript">
    $(document).ready(function() {
        //1.获取全选按钮
        var chkAllObj = document.getElementById("checkAll");
        //2.获取所有单选框
        var chkOneObjs = document.getElementsByClassName("chkOne");
        console.info(chkOneObjs)
            //3.设置点击事件
        chkAllObj.onclick = function() {
            //3.1获取全选框的选中状态
            var isChecked = this.checked;
            //3.2for循环设置所有的单选框的选中状态
            for (var i = 0; i < chkOneObjs.length; i++) {
                chkOneObjs[i].checked = isChecked;

                //4.为所有单选框设施点击事件--实现勾选全部单选框,全选框也被勾选
                chkOneObjs[i].onclick = function() {
                    //4.2循环所有的单选框
                    for (var j = 0; j < chkOneObjs.length; j++) {
                        if (chkOneObjs[j].checked == false) {
                            //将全选框的选中状态改为false
                            chkAllObj.checked = false;
                            return;
                        }
                    }
                    //4.3如果代码可以执行到这里,全选都被选中了
                    chkAllObj.checked = this.checked;
                }
            }
        }

    })
</script>

</html>